<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogShow"
      width="40%"
      @close="closeDialog"
    >
      <el-form
        :model="formData"
        ref="formRef"
        :rules="formRules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="学科名称" prop="subject_name">
          <el-input
            style="width: 300px"
            v-model="formData.subject_name"
            placeholder="请输入学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formData.sort"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示" prop="is_show">
          <el-switch
            v-model="formData.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
        <el-form-item label="学科图标" prop="subject_icon">
          <el-upload
            :on-remove="onRemove"
            list-type="picture-card"
            class="upload-demo"
            :on-preview="onPreview"
            action="#"
            :file-list="fileList"
            :http-request="httpRequest"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="dialogShow = false">取消</el-button>
        <el-button size="small" @click="btnOk">确定</el-button>
      </span>
    </el-dialog>
    <!-- 预览部分 -->
    <el-dialog :visible.sync="dialogVisible" title="预览">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <!-- 预览部分结束 -->
  </div>
</template>

<script>
import EmployeesEnum from "@/api/constan/common";
import { getToken } from "@/utils/auth";
import { uploadImage, addsubjectApi, editsubjectApi } from "@/api/subject.js";
export default {
  name: "Addsubiect",
  data() {
    return {
      dialogVisible: false,
      enableState: EmployeesEnum.enableState, //显示隐藏枚举
      dialogShow: false, //控制弹框
      formData: {
        is_show: 1, //显示隐藏
        sort: 10, //排序
        subject_icon: "", //学科图标
        subject_name: "", //学科名称
      }, //表单数据
      formRules: {
        is_show: [{ required: true, message: "请输入", trigger: "blur" }],
        sort: [{ required: true, message: "请输入", trigger: "blur" }],
        subject_icon: [{ required: true, message: "请输入", trigger: "blur" }],
        subject_name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 图片上传部分
      headersData: { "x-token": getToken() },
      fileList: [],
      dialogImageUrl: "",
      imgUrl: "",
      actionUrl:
        process.env.VUE_APP_ApiUrl + "index/upload?mode=single&type=image",
    };
  },
  computed: {
    title() {
      return this.formData.id ? "修改学科" : "添加学科";
    },
  },
  methods: {
    closeDialog() {
      this.formData = {
        is_show: 1, //显示隐藏
        sort: 10, //排序
        subject_icon: "", //学科图标
        subject_name: "",
      };
      this.fileList = [];
      this.$refs.formRef.resetFields();
    },

    // 图片上传
    // /////////////////////////////////////////
    async httpRequest(data) {
      let fd = new FormData();

      fd.append("file", data.file);

      let { url } = await uploadImage(fd);
      this.formData.subject_icon = url;
      this.fileList.push({
        name: url,
        url: process.env.VUE_APP_BASE_IMG + url,
      });
      this.imgUrl = this.fileList[0].url;
    },
    //移除图片
    onRemove() {
      this.fileList = [];
      this.formData.subject_icon=''
    },
    // 预览部分
    onPreview() {
      this.dialogVisible = true;
      this.dialogImageUrl = this.imgUrl;
    },
    // //////////////////////////////////////////////////
    // 提交数据
    async btnOk() {
      // 验证变单
      try {
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        // 修改数据
        await editsubjectApi(this.formData);
        this.$message.success("修改成功");
      } else {
        // 新增数据
        await addsubjectApi(this.formData);
        this.$message.success("添加成功");
      }
      this.$emit("addItem");
      this.dialogShow = false;
    },
  },
};
</script>

<style></style>
